﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">  
	<title>救援界面</title>
	<meta name="keywords" content="Bootstrap模板,Bootstrap3模版,Bootstrap模板下载,Bootstrap后台模板,Bootstrap教程,Bootstrap中文,后台管理系统模板,后台模板下载,后台管理系统,后台管理模板">
	<meta name="description" content="JS代码网提供Bootstrap模板,后台管理系统模板,后台管理界面,Bootstrap后台板版下载">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/site.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
    <style type="text/css">
    html, body {
        height: 100%;
    }
    </style>
      <script src="js/jquery.js"></script>
      <script src="js/jquery.flot.js"></script>
      <script src="js/jquery.flot.resize.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/maphilight-master/jquery.maphilight.js"></script>
      <script type="text/javascript">
          $(function() {
              //alert("asd")
              suo();
              $('.map').maphilight();
              $('#squidheadlink').mouseover(function(e) {
                  $('#squidhead').mouseover();
              }).mouseout(function(e) {
                  $('#squidhead').mouseout();
              }).click(function(e) { e.preventDefault(); });
          });
          function suo(){
              var img=document.getElementById("img");

              var data=img.width/2000;
              img.height=data*1422
              var arr=document.getElementsByTagName("area");
              for(var i=0;i<arr.length;i++)
              {
                  var tem=arr[i].coords.split(',');
                  var str='';
                  for(var j=0;j<tem.length-1;j++)
                      str+=parseInt(tem[j])*data+',';
                  str+=parseInt(tem[tem.length-1])*data;
                  arr[i].coords=str;
              }
              arr=document.getElementsByTagName("area");
              //alert(arr[0].coords)
          }
          function ccc(){
              alert($('#area1').coords)
          }
          function Safe(){
              $.ajax({
                  url:"/index/setQiangSafe",
                  data:{"id":$('#tagid').val()}
              })
          }
          function Alert(){
              $.ajax({
                  url:"/index/setQianAlert",
                  data:{"id":$('#tagid').val()}
              })
          }
          function jiechuqiangzhi(){
              $.ajax({
                  url:"/index/jiechuqiangzhi",
                  data:{"id":$('#tagid').val()}
              })
          }
          var websocket=null;
          if('WebSocket' in window){
              websocket=new WebSocket('ws://localhost:8081/uwbwebSocket');
          }
          else {
              alert('该浏览器不支持websocket');
          }
          websocket.onopen=function (event){
              console.log('建立连接');
          }
          websocket.onClose=function (event) {
              console.log('连接关闭')
          }
          websocket.onmessage=function (event){
              console.log('收到消息:'+event.data)
              var tem=JSON.parse(event.data);
              //var map=JSON.parse(tem.data);
              map=new Map();
              for(var p in tem){//遍历json对象的每个key/value对,p为key
                  if(p!=="tag"&&p!=="tagid") {
                      map.set(p, tem[p]);
                  }
              }
              zhuangtai();
              if(tem.tag===0){
                  var set=tem.Lost;
                  if(set!="")
                  {
                      $('#toukuilost').text(set);
                      $('#LOST').modal();
                  }
                  else {
                      $('#LOST').modal('hide');
                  }
                  //$('#GO').modal('hide');
              }
              else if(tem.tag===1)
              {
                  $('#toukui').text(tem.tagid)
                  $('#GO').modal();
              }
              else if(tem.tag===2){
                  $('#touk1').text(tem.tagid)
                  $('#GO').modal();
              }
          }
          websocket.onerror=function (){
              alert('通信发生错误')
          }
          window.onbeforeunload=function (){
              websocket.close();
          }
          var map=new Map();
          function zhuangtai(){
              var sele=$('#tagid').val();
              if(map.get(sele)!=null) {
                  var obj=map.get(sele);
                  $("#id").text(obj.id)
                  $("#statue").text(obj.statue)
                  $("#dianya").text(obj.dianya+"(V)")
                  $("#qiya").text(obj.qiya+"(Pa)")
                  $("#qiyayuzhi").text(obj.qiyayuzhi+"(Pa)")
                  $("#qiwen").text(obj.qiwen+"(℃)")
                  $("#distances").html(
                      "\t\n到"+obj.distances[0][1]+"基站,"+obj.distances[0][0]+"米\t\n"+
                      "到"+obj.distances[1][1]+"基站,"+obj.distances[1][0]+"米\t\n"+
                      "到"+obj.distances[2][1]+"基站,"+obj.distances[2][0]+"米\t\n"+
                      "到"+obj.distances[3][1]+"基站,"+obj.distances[3][0]+"米\t\n"+
                      "到"+obj.distances[4][1]+"基站,"+obj.distances[4][0]+"米\t\n")
              }
              else {
                  $("#id").text(null)
                  $("#statue").text("未在线")
                  $("#dianya").text(null)
                  $("#qiya").text(null)
                  $("#qiyayuzhi").text(null)
                  $("#qiwen").text(null)
                  $("#distances").text(null)
              }
          }
          function selecttag() {
              zhuangtai();
          }
      </script>
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Admin</a>
          <div class="btn-group pull-right">
			<a class="btn" href="my-profile"><i class="icon-user"></i> Admin</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
			  <li><a href="my-profile">个人资料</a></li>
              <li class="divider"></li>
              <li><a href="#">退出</a></li>
            </ul>
          </div>
          <div class="nav-collapse">
            <ul class="nav">
			<li><a href="index">首页</a></li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">用户 <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="new-user">新建用户</a></li>
					<li class="divider"></li>
					<li><a href="users">管理用户</a></li>
				</ul>
			  </li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">角色 <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="new-role">新建角色</a></li>
					<li class="divider"></li>
					<li><a href="roles">管理角色</a></li>
				</ul>
			  </li>
			  <li><a href="stats">救援</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row-fluid">
          <div class="span2">
              <div class="well sidebar-nav">
                  <ul class="nav nav-list">
                      <li class="nav-header"><i class="icon-map-marker"></i> 地图</li>
                      <li class="active"><a href="index">uwb界面</a></li>
                      <li><a href="stats">救援界面</a></li>
                      <li class="nav-header"><i class="icon-user"></i> 管理</li>
                      <li><a href="users">用户</a></li>
                      <li><a href="roles">角色</a></li>
                      <li class="nav-header"><i class="icon-wrench"></i> 设置</li>
                      <li><a href="my-profile">我的资料</a></li>
                      <li><a href="setting">串口设置</a></li>
                      <li><a href="#">退出</a></li>
                  </ul>
              </div>
              <div>
                  <div style="height: 100px">
                      <div class="span6" style="" >
                          <select onchange="selecttag()" style="width: 100px" class="selectpicker " id="tagid">
                              <option value=0 th:selected="1">头盔0</option>
                              <option value=1 th:selected="0">头盔1</option>
                              <option value=2 th:selected="0">头盔2</option>
                              <option value=3 th:selected="0">头盔3</option>
                              <option value=4 th:selected="0">头盔4</option>
                              <option value=5 th:selected="0">头盔5</option>
                              <option value=6 th:selected="0">头盔6</option>
                              <option value=7 th:selected="0">气压计基站</option>
                              <option value=8 th:selected="0">头盔8</option>
                              <option value=9 th:selected="0">头盔9</option>
                              <option value=10 th:selected="0">头盔10</option>
                              <option value=11 th:selected="0">头盔11</option>
                              <option value=12 th:selected="0">头盔12</option>
                          </select>
                          <button style="margin-top: 0px;width: 120px;" class="btn btn-success" onclick="Safe()" id="shoudong">设为安全</button>
                          <button style="margin-top: 10px;width: 120px" class="btn btn-success" onclick="Alert()" id="fanhang">设为警报</button>
                          <button style="margin-top: 10px;width: 120px" class="btn btn-success" onclick="jiechuqiangzhi()" id="fuwei">解除强制状态</button>
                      </div>
                  </div>
                  <div>
                  </div>
                  <!--救生圈信息-->
                  <div  style="width: 100%;margin-top: 50px">
                      <div style="width:100%;">
                          <div align="center"  class="alert alert-success" role="alert">
                              <h2>模块状态</h2>
                              <div style="width: 90%" align="left">
                              <span>Id：</span><span id="id"></span><br>
                              <span>状态：</span><span id="statue"></span><br>
                              <span>电压：</span><span id="dianya"></span><br>
                              <span>气压：</span><span id="qiya"></span><br>
                              <span>气压阈值：</span><span id="qiyayuzhi"></span><br>
                              <span>气温：</span><span id="qiwen"></span><br>
                              <span>到各基站距离：</span><span style="white-space:pre-wrap;" id="distances"></span><br>
                          </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="span10">
		  <div class="row-fluid">
			<div class="page-header">
				<h1>UWB界面 <small></small></h1>
			</div>
              <div style="width: 100%">
                  <img onmousedown="ccc()" id="img" width= "2000" height= "1422"  src="img/yinyantu.Png"  class="map" usemap="#Map" />
                  <map name="Map" id="Map">
                      <area id="area1" shape="poly" coords="232,619,459,719,380,899,217,826,181,818,179,823,171,819,176,808,155,797" href="#" alt="注水二层" />
                      <area shape="poly" coords="194,942,409,1009,361,1164,268,1137,265,1146,234,1139,236,1126,183,1112,177,1133,182,1135,173,1166,143,1156,153,1127,162,1129,169,1107,146,1099" href="#" alt="注水一层" />
                      <area shape="poly" coords="758,586,956,562,963,575,973,570,981,585,970,592,1025,744,945,754,945,768,802,786,798,770,736,780,743,716,730,710,739,632,753,628" href="#" alt="动力一层" />
                      <area shape="poly" coords="1220,751,1489,814,1431,927,1450,935,1433,967,1415,959,1407,978,1225,936" href="#" alt="生产二层" />
                      <area shape="poly" coords="1222,463,1509,533,1504,544,1528,558,1499,621,1486,613,1465,653,1451,647,1417,707,1222,659" href="#" alt="生产一层" />
                      <area shape="poly" coords="1683,596,1871,658,1864,867,1567,768" href="#" alt="储罐平台" />
                      <area shape="poly" coords="1224,1011,1507,1078,1421,1252,1225,1205" href="#" alt="生产三层" />
                      <area shape="poly" coords="839,1169,1009,1136,1081,1290,830,1338" href="#" alt="主控室" />
                      <area shape="poly" coords="802,869,797,941,791,944,790,937,787,943,782,944,782,949,789,949,788,1079,1102,1020,1013,829" href="#" alt="动力二层" />
                      <area shape="poly" coords="668,103,962,102,937,235,948,236,942,273,931,269,926,290,703,289,696,249,687,253,687,244,693,241" href="#" alt="" />
                      <area shape="poly" coords="1020,101,1025,129,1006,135,1009,156,1015,175,1033,176,1039,200,1027,200,1028,210,1035,224,1043,223,1055,288,1280,288,1301,175,1319,172,1327,133,1311,121,1313,99" href="#" alt="生活二层" />
                      <area shape="poly" coords="1446,82,1407,109,1408,224,1432,222,1432,253,1643,250,1644,221,1666,220,1665,110,1624,80" href="#" alt="直升机机坪" />
                  </map>
              </div>
		  </div>
        </div>
      </div>

        <!--提示人员落水-->
        <div data-backdrop="false" class="modal fade" id="GO" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div align="center" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h2 class="modal-title" style="color:#dc143c">当前头盔<span id="toukui"></span>落水,请前往救援界面</h2>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                        <button onclick="window.location='/stats'" type="button"  class="btn btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>前往</button>
                    </div>
                </div>
            </div>
        </div>
        <!--提示人员失联-->
        <div data-backdrop="false" class="modal fade" id="LOST" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div align="center" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h2 class="modal-title" style="color:#dc143c">警告,当前头盔<span id="toukuilost"></span>失联</h2>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    </div>
                </div>
            </div>
        </div>
      <hr>

      <footer class="well">
        © Admin
      </footer>

    </div>
  </body>
</html>

